<template>
    <NForm ref="formRef" :model="form" inline size="small" :show-label="false" class="mt-4">
        <NGrid x-gap="12" responsive="screen" item-responsive>
            <NFormItemGi span="24 s:12 m:6" prop="UID">
                <NInput v-model:value="form.uid" clearable placeholder="UID"></NInput>
            </NFormItemGi>
            <NFormItemGi span="24 s:12 m:6" prop="orderNumber">
                <NInput v-model:value="form.orderNumber" clearable placeholder="订单号"></NInput>
            </NFormItemGi>
            <NFormItemGi span="24 s:12 m:6" prop="receiverAccount">
                <NInput v-model:value="form.receiverAccount" clearable placeholder="接受地址"></NInput>
            </NFormItemGi>

            <NFormItemGi span="24 s:12 m:6" prop="status">
                <NSelect
                    v-model:value="form.status"
                    :options="WalletStatusOptions"
                    placeholder="订单状态"
                    clearable
                ></NSelect>
            </NFormItemGi>

            <NFormItemGi span="24 s:12 m:6" prop="inviteCode">
                <NInput v-model:value="form.inviteCode" clearable placeholder="邀请码"></NInput>
            </NFormItemGi>

            <NFormItemGi span="24 s:12 m:6" prop="time">
                <NDatePicker
                    v-model:value="form.time"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    clearable
                />
            </NFormItemGi>

            <NFormItemGi span="24 s:12 m:6" prop="tradeType">
                <NSelect
                    v-model:value="form.tradeType"
                    :options="WalletTradeTypeOptions"
                    placeholder="账单类型"
                    clearable
                ></NSelect>
            </NFormItemGi>

            <NFormItemGi span="24 s:12 m:6">
                <NButton type="primary" @click="search">
                    <template #icon>
                        <NIcon>
                            <Search />
                        </NIcon>
                    </template>
                    查询
                </NButton>
                <NButton @click="reset" class="ml-3">重置</NButton>
            </NFormItemGi>
        </NGrid>
    </NForm>
    <NDivider style="margin-top: 0px" />
    <NFlex justify="space-between">
        <NFlex>
            <!-- <NButton type="primary" size="small">
                <template #icon>
                    <NIcon>
                        <PlusSharp />
                    </NIcon>
                </template>
                新建
            </NButton>
            <NButton secondary size="small">批量导入</NButton> -->
        </NFlex>
        <NButton secondary size="small" :loading="exportLoading" @click="exportList">
            <template #icon>
                <NIcon>
                    <Download />
                </NIcon>
            </template>
            导出
        </NButton>
    </NFlex>
    <NDataTable
        class="mt-4"
        :columns="columns"
        :data="list"
        :row-key="(row: Api.Bill.Wallet) => row.orderNumber"
        :loading="loading"
    ></NDataTable>

    <NFlex justify="flex-end" class="mt-4">
        <NPagination
            v-model:page="pager.pageIndex"
            v-model:page-size="pager.pageSize"
            :item-count="total"
            show-size-picker
            :page-sizes="[10, 20, 50, 100]"
        />
    </NFlex>
</template>

<script setup lang="tsx">
import { reactive, ref, watch } from 'vue'
import dayjs from 'dayjs'
import { Search, Download } from '@vicons/carbon'
import { PlusSharp } from '@vicons/material'
import { NDivider, NTag, NFlex, NButton, NSelect, useMessage, type DataTableColumns, type FormInst } from 'naive-ui'
import { queryWalletList, exportWalletList } from '@/api/bill'
import { WalletStatus, WalletStatusOptions, WalletTradeType, WalletTradeTypeOptions } from '@/constants/bill'

defineOptions({
    name: 'WalletBill'
})

const message = useMessage()
const formRef = ref<FormInst | null>(null)
const form = ref<
    Api.Bill.WalletSearchParams & {
        time: null | [number, number]
    }
>({
    uid: null,
    inviteCode: null,
    orderNumber: null,
    receiverAccount: null,
    status: null,
    tradeType: null,
    startTime: null,
    endTime: null,
    time: null
})

const columns: DataTableColumns<Api.Bill.Wallet> = [
    {
        title: 'uid',
        key: 'uid'
    },
    {
        title: '订单号',
        key: 'orderNumber'
    },
    {
        title: '类型',
        key: 'tradeTypeDescription'
        // render: row => WalletTradeType[row.tradeType]
    },
    {
        title: '币种',
        key: 'currency'
    },

    {
        title: '接受地址',
        key: 'receiverAccount'
    },

    {
        title: '订单金额',
        key: 'srcAmountDescription'
    },

    {
        title: '到账金额',
        key: 'descAmountDescription'
    },

    {
        title: '手续费',
        key: 'fee'
    },

    {
        title: '订单状态',
        key: 'status',
        render: row => {
            const type: Record<Api.Bill.WalletStatus, Naive.Type> = {
                1: 'warning',
                2: 'success',
                3: 'error',
                4: 'error'
            }

            return (
                <NTag size="small" type={type[row.status]!}>
                    {WalletStatus[row.status]}
                </NTag>
            )
        }
    },

    {
        title: '创建日期',
        key: 'createdAt',
        render(row) {
            return dayjs(row.createdAt * 1000).format('YYYY-MM-DD HH:mm:ss')
        }
    },

    {
        title: '操作',
        key: 'actions',
        render: row => {
            return <NFlex></NFlex>
        }
    }
]

const list = ref<Api.Bill.WalletList>([])
const total = ref(0)
const loading = ref(false)
const pager = reactive({
    pageIndex: 1,
    pageSize: 10
})

let params: Api.Bill.WalletSearchParams | null = null
const queryData = async () => {
    const { time, ...opts } = form.value
    loading.value = true
    params = {
        ...opts,
        ...pager,
        startTime: time ? Math.ceil(time[0] / 1000) : undefined,
        endTime: time ? Math.ceil(time[1] / 1000) : undefined
    }
    const [err, res] = await queryWalletList(params)
    loading.value = false
    if (!err) {
        const { count, list: dataList } = res
        list.value = dataList
        total.value = count
    }
}
queryData()
watch(pager, queryData)

const search = () => {
    pager.pageIndex = 1
    queryData()
}

const reset = () => {
    form.value = {
        uid: null,
        inviteCode: null,
        receiverAccount: null,
        status: null,
        tradeType: null,
        startTime: null,
        endTime: null,
        time: null
    }
    pager.pageIndex = 1
    queryData()
}

const exportLoading = ref(false)
const exportList = async () => {
    exportLoading.value = true
    const [err, res] = await exportWalletList(params!)
    exportLoading.value = false
    if (!err && res) {
        const { filename } = res
        window.open(filename)
    }
}
</script>
